<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.6.3/jquery.js"></script>

    <!-- 
        地图图表使用方式：
            1、百度地图API
               需要申请百度地图AK
            2、矢量地图
               需要准备矢量地图数据
     -->
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
</body>
<script>
    /*
    1、Echarts最基本的代码结构
    2、准备中国地图的矢量数据
    3、矢量Ajax获取矢量地图数据
    4、在Ajax的回调函数中注册地图矢量数据echarts.registerMap('chinaMap',矢量地图数据)
    5、配置geo的type为'map',map为'chinaMap'

    设置缩放拖动：
        roam
    名称显示：
        label
    初始缩放比例：
        zoom
    设置中心点
        center
    */
    /*
    常见效果
        显示某个区域：
            加载该区域的矢量地图数据
            通过registerMap注册到echarts全局对象中
            指明geo配置下的type和map属性
            通过zoom将该区域放大
            通过center定位中心点
    */
   var mEcharts = echarts.init(document.querySelector('div'))
   $.get('./json/map/china.json',function(ret){
    console.log(ret );
    echarts.registerMap('chinaMap',ret)//这里的China要和下面geo中配置的map里的数值要一致
    var option ={
        geo:{
            type:'map',
            map:'chinaMap',
            roam:true ,//设置允许缩放以及拖动的效果
        label:{
            show:true
        },
        zoom:2,//设置初始化放大化，页面刷新就展示的缩放比例
        center:[87.617733,43.792818]    //设置地图中心点的坐标
    }
    }
    mEcharts.setOption(option)
   })
   


  
</script>
</html>